<template>
    <div class="userMessage" v-for="item in props.userData">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
        <span>{{ item.userName }}:&nbsp;</span>
        <span>&nbsp;&nbsp;{{ item.message }}</span>
        <br/>
        <span style="visibility: hidden;">{{ item.id }}</span>
    </div>
</template>

<script setup>
import { ref , defineProps, onMounted } from "vue";

var userName = ref();
var time = ref();
var message = ref();

onMounted(()=>{
    console.log(props.userData)
})

const props = defineProps({
    userData:{
        type:Object
    },
})
</script>

<style scoped>
span{
    font-size: 1.25rem;
}
</style>